<template>
    <div class="addressmanage">
        <div class="header">
            <nut-navbar>地址管理</nut-navbar>
        </div>
       <ul>
           <li class="list-li">
               <div class="alladdress">
                   <p>
                       <span class="span1">默认</span>
                       <span class="span2">家</span>
                       <span>浙江省杭州市滨江区浦沿街道</span>
                   </p>
                   <p>浙江机电职业技术学院</p>
                   <p>
                       <span class="span3">名字</span>
                       <span class="span4">123456789</span>
                   </p>
               </div>
               <p>编辑</p>
           </li>
           <li class="list-li">
               <div class="alladdress">
                   <p>
                       <span class="span1">默认</span>
                       <span class="span2">家</span>
                       <span>浙江省杭州市滨江区浦沿街道</span>
                   </p>
                   <p>浙江机电职业技术学院</p>
                   <p>
                       <span class="span3">名字</span>
                       <span class="span4">123456789</span>
                   </p>
               </div>
               <p>编辑</p>
           </li>
           <li class="list-li">
               <div class="alladdress">
                   <p>
                       <span class="span1">默认</span>
                       <span class="span2">家</span>
                       <span>浙江省杭州市滨江区浦沿街道</span>
                   </p>
                   <p>浙江机电职业技术学院</p>
                   <p>
                       <span class="span3">名字</span>
                       <span class="span4">123456789</span>
                   </p>
               </div>
               <p>编辑</p>
           </li>
           <li class="list-li">
               <div class="alladdress">
                   <p>
                       <span class="span1">默认</span>
                       <span class="span2">家</span>
                       <span>浙江省杭州市滨江区浦沿街道</span>
                   </p>
                   <p>浙江机电职业技术学院</p>
                   <p>
                       <span class="span3">名字</span>
                       <span class="span4">123456789</span>
                   </p>
               </div>
               <p>编辑</p>
           </li>
           <li class="list-li">
               <div class="alladdress">
                   <p>
                       <span class="span1">默认</span>
                       <span class="span2">家</span>
                       <span>浙江省杭州市滨江区浦沿街道</span>
                   </p>
                   <p>浙江机电职业技术学院</p>
                   <p>
                       <span class="span3">名字</span>
                       <span class="span4">123456789</span>
                   </p>
               </div>
               <p>编辑</p>
           </li>
           <li class="list-li">
               <div class="alladdress">
                   <p>
                       <span class="span1">默认</span>
                       <span class="span2">家</span>
                       <span>浙江省杭州市滨江区浦沿街道</span>
                   </p>
                   <p>浙江机电职业技术学院</p>
                   <p>
                       <span class="span3">名字</span>
                       <span class="span4">123456789</span>
                   </p>
               </div>
               <p>编辑</p>
           </li>
           <li class="list-li">
               <div class="alladdress">
                   <p>
                       <span class="span1">默认</span>
                       <span class="span2">家</span>
                       <span>浙江省杭州市滨江区浦沿街道</span>
                   </p>
                   <p>浙江机电职业技术学院</p>
                   <p>
                       <span class="span3">名字</span>
                       <span class="span4">123456789</span>
                   </p>
               </div>
               <p>编辑</p>
           </li>
       </ul>
        <div class="action">
            <nut-button block shape="circle">+新建收货地址</nut-button>
        </div>
    </div>
</template>

<script scoped>
    import NutIcon from "../../node_modules/@nutui/nutui/dist/packages/icon/icon.vue";

    export default {
        components: {NutIcon},
        name: "addressmanage",
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style scoped>
    .addressmanage>ul{
        height: 620px;
        overflow: auto;
    }
    .span1{
        line-height: 1.5em;
        display: inline-block;
        background: red;
        padding:0px 5px;
        margin-right: 6px;
        color: #ffffff;
        font-size: 14px;
    }
    .span2{
        line-height: 1.5em;
        display: inline-block;
        background: dodgerblue;
        color: #ffffff;
        padding:0px 5px;
        margin-right: 6px;
        font-size: 14px;
    }
    .span3{
        margin-right: 20px;
    }
    .list-li{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding:5px 10px;
        background: #ffffff;
        margin: 5px 0px;
    }
    .alladdress{
        width:90%;
        height: 120px;
    }
    .alladdress>p{
        line-height: 1.2em;
        font-size: 14px;
    }
    .alladdress>p:nth-of-type(2){
        font-size: 16px;
        font-weight: 600;
    }
    .list-li>p{
        width:10%;
        font-size: 14px;
        line-height: 120px;
        margin: 0px;
    }
    .action{
        position: relative;
        bottom: -30px;
        width: 90%;
        left: 50%;
        margin-left: -162px;
    }
</style>